<template>
    <div class="cropper_area_container" :style="containerStyle">
        <div class="rotate-list">
            <el-button type="primary" icon="el-icon-refresh-left" @click="rotateLeft"> 左旋转</el-button>
            <el-button type="primary" icon="el-icon-refresh-right" @click="rotateRight"> 右旋转</el-button>
            <el-button type="primary" icon="el-icon-zoom-in" @click="scaleBigger"> 放大</el-button>
            <el-button type="primary" icon="el-icon-zoom-out" @click="scaleSmaller"> 缩小</el-button>
            <el-button type="primary" icon="el-icon-refresh" @click="getRefresh"> 重置</el-button>
            <span style="margin-left: 30%;">图片大小：{{ trueWidth }} * {{ trueHeight }}</span>
            <span style="margin-left: 30px;">缩放比例：{{ scale }} %</span>
        </div>
        <div class="cropper_area">
            <vue-cropper v-if="options" ref="cropper" v-bind="options" @img-load="imgLoad"
                         @realTime="realTime"></vue-cropper>
        </div>
    </div>
</template>

<script>
import {VueCropper} from 'vue-cropper'

export default {
    name: "CropperArea",
    components: { VueCropper },
    props: {
        options: {
            type: Object,
            default: null,
        },
        upload: {
            type: Object,
            default: null,
        },
    },
    data() {
        return {
            scale: 1,
            trueHeight: 0,
            trueWidth: 0,
        };
    },
    computed: {
        containerStyle() {
            const height = $(this.getActiveTabsContainer()).height() * 0.9 - 100;
            return {
                height: `${height}px`,
            };
        },
    },
    methods: {
        // 向左边旋转
        rotateLeft() {
            const _this = this;
            if (_this.$refs.cropper) {
                _this.$refs.cropper.rotateLeft();
            }
        },
        // 向右边旋转
        rotateRight() {
            const _this = this;
            if (_this.$refs.cropper) {
                _this.$refs.cropper.rotateRight();
            }
        },
        // 清除旋转
        rotateClear() {
            const _this = this;
            if (_this.$refs.cropper) {
                _this.$refs.cropper.rotateClear();
            }
        },
        // 图片放大
        scaleBigger() {
            const _this = this;
            if (_this.$refs.cropper) {
                _this.$refs.cropper.changeScale(1);
            }
        },
        // 图片缩小
        scaleSmaller() {
            const _this = this;
            if (_this.$refs.cropper) {
                _this.$refs.cropper.changeScale(-1);
            }
        },
        // 重置大小
        reload() {
            const _this = this;
            if (_this.$refs.cropper) {
                _this.$refs.cropper.reload();
            }
        },
        // 重置所有
        getRefresh() {
            const _this = this;
            if (_this.$refs.cropper) {
                _this.$refs.cropper.reload()
                _this.$refs.cropper.rotateClear()
            }
        },
        // 开始截图
        startCrop() {
            const _this = this;
            if (_this.$refs.cropper) {
                _this.$refs.cropper.startCrop()
            }
        },
        // 停止截图
        stopCrop() {
            const _this = this;
            if (_this.$refs.cropper) {
                _this.$refs.cropper.stopCrop()
            }
        },
        // 清除截图
        clearCrop() {
            const _this = this;
            if (_this.$refs.cropper) {
                _this.$refs.cropper.clearCrop()
            }
        },
        // 图片加载
        imgLoad(type) {
            const _this = this;
            if (type === "success") {
            } else {
                _this.$message.error("图片加载出错！");
            }
        },
        // 实时预览
        realTime() {
            const _this = this;
            if (_this.$refs.cropper) {
                _this.trueHeight = _this.$refs.cropper.trueHeight;
                _this.trueWidth = _this.$refs.cropper.trueWidth;
                _this.scale = (_this.$refs.cropper.scale * 100).toFixed(0);
            }
        },
        // 确定裁剪
        async confirm() {
            const _this = this;
            if (_this.$refs.cropper) {
                const loading = this.$loading({
                    lock: true,
                    text: '正在生成裁剪图片........................',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                return new Promise(resolve => {
                    _this.$refs.cropper.getCropData((data) => {
                        _this.uploadFile(data, loading, resolve);
                    });
                });
            }
            return false;
        },
        // 上传文件
        uploadFile(data, loading, resolve) {
            const _this = this;
            return _this.storeDispatch('uploadBase64', {
                base64: data,
                associate_biz_table: _this.upload.associate_biz_table,
                associate_biz_sid: undefined,
                associate_biz_field_tag: _this.upload.associate_biz_field_tag,
            }).then(result => {
                let resData = result.data || {};
                let url = _this.getFileWithType(resData.sid, resData.file_type);
                let obj = {
                    sid: resData.sid,
                    name: resData.original_file_name,
                    url,
                };
                loading.close();
                _this.$message.success("上传成功！");
                _this.$emit("event", {
                    type: 'success',
                    data: resData,
                    obj,
                });
                resolve(true);
            }).catch(() => {
                loading.close();
                _this.$message.error("上传失败");
                resolve(false);
            });
        },
    },
}
</script>

<style scoped lang="less">
.cropper_area_container {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .rotate-list {
        margin-bottom: 6px;
    }

    .cropper_area {
        width: 100%;
        height: calc(100% - 30px);
    }
}
</style>
